<script setup>
import { ref } from "vue"
defineProps({
    type: {
        type: String,
        default: "warning"
    },
    message: {
        type: String,
        default: ""
    }
})

const styleType = {
    success: { icon: 'icon-chenggongyijiejue' },
    warning: { icon: 'icon-xinxitishi' },
    error: { icon: 'icon-shibaibaocuo' }
}
const isShow = ref(true)
setTimeout(() => {
    isShow.value = false
}, 3000)
</script>

<template>
    <transition name="show">
        <div class="yike-message" v-if="isShow">
            <div class="message-box">
                <span class="iconfont" :class="styleType[type].icon"></span>
                <div class="text"> {{ message }}</div>
            </div>
        </div>
    </transition>
</template>

<style lang="less" scoped>
.show {
    &-enter {
        &-from {
            transform: translateY(-30px);
            opacity: 0;
        }

        &-active {
            transition: all 0.3s;
        }

        &-to {
            transform: translateY(0px);
            opacity: 1;
        }
    }

    &-leave {
        &-from {
            transform: translateY(0px);
            opacity: 1;
        }

        &-active {
            transition: all 0.3s;
        }

        &-to {
            transform: translateY(-30px);
            opacity: 0;
        }
    }
}

.yike-message {
    position: fixed;
    height: 40px;
    line-height: 40px;
    top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index: 999;

    .message-box {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        padding: 0 15px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
        border-radius: 3px;

        .iconfont {
            margin-right: 5px;
            vertical-align: middle;
        }

        .text {
            vertical-align: middle;
        }

        .icon-chenggongyijiejue {
            color: #3B73F0;
        }

        .icon-xinxitishi {
            color: #F67770;
        }

        .icon-shibaibaocuo {
            color: #F35248;
        }
    }
}</style>